<template>
	<view class="conter">

		<view class="header" style="color: #000000;" @tap="goBack()">
			<view class="arrow">
			</view>
			<view class="title">
				{{title}}
			</view>
		</view>

		<view class="phone">
			<view class="f28" style="width: 100rpx;">
				<text style="color: #FF0000;">*</text>名称:
			</view>
			<view class="f24 borde">
				<input type="text" v-model="titl" placeholder="填写场地名称" style="width: 100%; height: 100%;" />
			</view>
		</view>


		<view class="phone">
			<view class="f28" style="width: 100rpx;">
				<text style="color: #FF0000;">*</text>价格:
			</view>
			<view class="f24 borde">
				<input type="text" v-model="money" placeholder="填写价格"
					style="width: 100%; height: 100%;color: #FF0000;" />
			</view>
		</view>


		<view class="phone" @click="map">
			<view class="f28" style="width: 100rpx;">
				<text style="color: #FF0000;">*</text>地址:
			</view>
			<view class="f24 borde" style="line-height: 40rpx;">
				<text v-if="propShow ">{{addressInfo}}</text>
				<view v-else style="width: 100%; height: 100%;" >
					{{nameInfo ? nameInfo : '请选择地址'}}
				</view>
			</view>
		</view>


		<view class="bgc"></view>


		<view class="phone" v-for="(item, index) in listFrom" :key="index" @click="jump(item.url)">
			<view class="f28" style="width: 100rpx;">
				<text style="color: #FF0000;">*</text>{{item.name}}:
			</view>
			<view class="f24 borde">
				<view 
					style="width: 100%; height: 100%;" >
					{{item.text}}
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>



			
			
		<view class="wh90 h80 r50"
			style="background-color: #54599B;
			margin: 0 auto 0;
			line-height: 80rpx;
			text-align: center;
			color:  #DDDEEB;" 
			@tap="addSubmit">
			提交审核
		</view>








		<u-picker mode="region" @confirm="confirm" v-model="show" :default-selector='[0, 1, 3]'></u-picker>


	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				action: this.$UPLOAD,
				title: '上传图册',
				show: false,
				selector: [1, 2, 3],
				multiSelector: [
					[1, 2, 3],
					[4, 5, 6]
				],
				// 这种情况需要指定range-key为cateName，否则组件不知道该显示对象的哪个属性
				selectorObj: [{
						cateName: '1',
						id: 1
					},
					{
						cateName: '2',
						id: 2
					}
				],
				info: '',
				loadStatus: 'loadmore',
				flowList: [],
				list: [],
				address: '',
				nameInfo: '',
				addressInfo: '',
				titl: '',
				money: '',
				lists: [],
				leng: [],
				imag: [],
				propShow: false,
				listFrom: [{
					name: '大厅',
					text: '请上传',
					url: '/pages/site/dating'
				}, {
					name: '舞台',
					text: '请上传',
					url: '/pages/site/wetai'
				}, {
					name: 'LED',
					text: '请上传',
					url: '/pages/site/LED'
				}, {
					name: '序厅',
					text: '请上传',
					url: '/pages/site/xulie'
				}, {
					name: '货梯',
					text: '请上传',
					url: '/pages/site/huoti'
				}, {
					name: '接电',
					text: '请上传',
					url: '/pages/site/jiedian'
				}],
				daTing: [],
				wutai: [],
				led: [],
				xuting: [],
				huoti: [],
				jiedian: [],
				fmImage: '',
			}
		},	
		onLoad(e) {},
		onShow() {
			if (this.daTing.length > 0) {
				this.listFrom[0].text = '已上传'
				console.log('this.daTing',this.daTing)
			}
			
			if (this.wutai.length > 0) {
				this.listFrom[1].text = '已上传'
				console.log('this.wutai',this.wutai)
			}
			
			if (this.led.length > 0) {
				this.listFrom[2].text = '已上传'
				console.log('this.led',this.led)
			}
			
			if (this.xuting.length > 0) {
				this.listFrom[3].text = '已上传'
				console.log('this.xuting',this.xuting)
			}
			
			if (this.huoti.length > 0) {
				this.listFrom[4].text = '已上传'
				console.log('this.huoti',this.huoti)
			}
			
			if (this.jiedian.length > 0) {
				this.listFrom[5].text = '已上传'
				console.log('this.jiedian',this.jiedian)
			}
		},
		methods: {
			
			onRemove3(index, lists) {
				this.fmImage = ''
			},
			
			uploadImageC3(e) {
				this.fmImage = e.data.url
				console.log('e==>', e);
				console.log('e==>', e);
			},
			
			async addSubmit() {
				
				if (this.titl == '' && this.money == '' && this.nameInfo == '') return this.$tools.msg('内容不能为空！');
				
				var obj = {
					jiedian: JSON.stringify(this.jiedian),
					huoti: JSON.stringify(this.huoti),
					xuting: JSON.stringify(this.xuting),
					led: JSON.stringify(this.led),
					wutai: JSON.stringify(this.wutai),
					dating: JSON.stringify(this.daTing),
					uid: uni.getStorageSync('uid'),
					money: this.money,
					title: this.titl,
					name: this.nameInfo,
					address: this.address,
					latitude: this.latitude,
					longitude: this.longitude,
				}
				const res = await this.$u.post('api/hotel/add', obj, {})
				if (res.code == 1) {
					this.$tools.msg('提交成功!');
					
					
					uni.removeStorageSync('led')
					uni.removeStorageSync('xulie')
					uni.removeStorageSync('huoti')
					uni.removeStorageSync('jiedian')
					uni.removeStorageSync('dating')
					uni.removeStorageSync('wutai')
					
					
					
					
					setTimeout( function() {
						uni.navigateBack({
							delta: 1
						})
					},2000)
				} else {
					this.$tools.msg(res.msg);
				}
			},

			map() {
				var that = this
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称name：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						
						that.address = res.address
						that.latitude = res.latitude
						that.longitude = res.longitude
						console.log('res：' + res);
						that.nameInfo = res.name
						that.addressInfo = res.name + res.address
						if (res.address != '') that.propShow = true
					}
				});
			},

			jump(url) {
				uni.navigateTo({
					url
				});
			},


			beforeUpload(index, list) {
				
				console.log('只索引的文', index, )
			},



			async addUpload() {

				if (this.nameInfo == '' || this.address == '' || this.titl == '' || this.money == '') return this
					.$tools.msg('内容不能为空')
				if (this.imag == '') return this.$tools.msg('图片必须上传')

				
				const obj = {
					uid: 1,
					name: this.nameInfo,
					address: this.address,
					title: this.titl,
					money: this.money,
					image: this.imag,
				}
				const res = await this.$u.post('api/hotel.Index/add', obj, {})
				if (res.code != 1) return this.$tools.msg(res.msg)
				this.$tools.msg(res.msg)
				uni.navigateBack({
					delta: 1
				})
			},


			addRandomData() {
				for (let i = 0; i < 10; i++) {
					let index = this.$u.random(0, this.list.length - 1);
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(this.list[index]))
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},




			goBack(id) {
				console.log(id)
				uni.navigateBack({
					delta: 1
				})
			},

			// 回调参数为包含多个元素的数组，每个元素分别反应每一列的选择情况
			confirm(e) {
				this.address = e.area.label + '-' + e.city.label + '-' + e.province.label
				console.log(e);
			},

			image() {
				console.log(9999);
				uni.previewImage({
					urls: [...this.img],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						},
					},
				});
			},


		}
	}
</script>

<style lang="scss" scoped>
	/deep/page {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF !important;
	}
	
	.conter {
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;

		image {
			width: 100%;
			height: 100%;
		}



		.header {
			width: 100%;
			height: 150rpx;
			line-height: 150rpx;
			display: flex;
			align-items: center;
			// padding-left: 10rpx;
			padding-top: 30rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			background: #FFFFFF;

			.arrow {
				position: relative;
				display: inline-block;
			}

			.arrow::before {
				content: '';
				width: 10px;
				height: 10px;
				border: 0px;
				border-bottom: solid 2px #2C2C2C;
				border-left: solid 2px #2C2C2C;
				-ms-transform: rotate(45deg);
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
				position: absolute;
				top: 50%;
				left: 0;
				margin-top: -4px;
				margin-left: 28rpx;
			}

			.title {
				margin: 0 auto;
			}
		}


		.phone {
			display: flex;
			align-items: center;
			width: 100%;
			height: 120rpx;
			padding: 0 40rpx;


			view {
				height: 80rpx;
				line-height: 80rpx;
			}

			.borde {
				width: 100%;
				margin-left: 16rpx;
				color: #A0A0A0;
				display: flex;
				padding-left: 40rpx;
				border-bottom: 1rpx solid #F8F8F8;
			}
		}

		.bgc {
			width: 100%;
			height: 20rpx;
			// background-color: #F8F8F8;
		}


		.addUpload {
			width: 80%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			color: #FFFFFF;
			margin: 100rpx auto 0;
			border-radius: 50rpx;
			background-color: #54599B;
		}


		.upload-image {


			.addSting {
				width: 86%;
				height: 300rpx;
				margin: 60rpx auto 0;

				view {
					width: 100%;
					height: 100rpx;
					margin: 20rpx 0;
					text-align: center;
					line-height: 100rpx;
					border-radius: 50rpx;
					font-size: 34rpx;
				}
			}



			.demo-warter {
				border-radius: 8px;
				margin: 5px;
				background-color: #ffffff;
				position: relative;
			}

			.u-close {
				position: absolute;
				top: 32rpx;
				right: 32rpx;
			}

			.demo-image {
				width: 100%;
				border-radius: 4px;
			}

			.demo-title {
				font-size: 30rpx;
				margin-top: 5px;
				color: $u-main-color;
			}

			.demo-tag {
				display: flex;
				margin-top: 5px;
			}

			.demo-tag-owner {
				background-color: $u-type-error;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				padding: 4rpx 14rpx;
				border-radius: 50rpx;
				font-size: 20rpx;
				line-height: 1;
			}

			.demo-tag-text {
				border: 1px solid $u-type-primary;
				color: $u-type-primary;
				margin-left: 10px;
				border-radius: 50rpx;
				line-height: 1;
				padding: 4rpx 14rpx;
				display: flex;
				align-items: center;
				border-radius: 50rpx;
				font-size: 20rpx;
			}

			.demo-price {
				font-size: 30rpx;
				color: $u-type-error;
				margin-top: 5px;
			}

			.demo-shop {
				font-size: 22rpx;
				color: $u-tips-color;
				margin-top: 5px;
			}
		}


	}
</style>
